let prizes;

class Qipao {
    constructor(option) {
        if (typeof option !== "object") {
            option = {
                text: option
            };
        }

        this.text = option.text;
        this.onComplete = option.onComplete;
        this.$par = document.querySelector(".qipao-container");
        if (!this.$par) {
            this.$par = document.createElement("div");
            this.$par.className = "qipao-container";
            document.body.appendChild(this.$par);
        }

        this.init();
    }

    init() {
        this.element = document.createElement("div");
        this.element.className = "qipao animated";
        this.$par.appendChild(this.element);

        this.start();
    }

    setText(text) {
        this.text = text || this.text;
        this.element.textContent = this.text;
    }

    start(text) {
        this.setText(text);
        this.element.classList.remove("bounceOutRight");
        this.element.classList.add("bounceInRight");

        setTimeout(() => {
            this.element.classList.remove("bounceInRight");
            this.element.classList.add("bounceOutRight");
            this.onComplete && this.onComplete();
        }, 4000);
    }
}

let addQipao = (() => {
    let qipaoList = [];
    return function (text) {
        let qipao;
        if (qipaoList.length > 0) {
            qipao = qipaoList.shift();
        } else {
            qipao = new Qipao({
                onComplete() {
                    qipaoList.push(qipao);
                }
            });
        }

        qipao.start(text);
    };
})();

function setPrizes(pri) {
    prizes = pri;
    let htmlCode = `<ul class="prize-list">
                        <li id="prize-item" class="prize-item shine">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <div class="prize-img">
                                <img src="${prizes.img}" alt="${prizes.title}">
                            </div>
                            <div class="prize-text">
                                <div class="prize-title">${prizes.text}<br>${prizes.title}</div>
                                <div class="prize-count">
                                    <div class="progress">
                                        <div id="prize-bar" class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 100%;"></div>
                                    </div>
                                    <div id="prize-count" class="prize-count-left">
                                        ${prizes.count + "/" + prizes.count}
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>`;
    document.querySelector("#prizeBar").innerHTML = htmlCode;
}

let setPrizeData = (function () {
    return function (prizes) {
        let currentPrize = prizes,
            type = prizes.type,
            // elements = prizeElement[type],
            totalCount = prizes.count;

        // if (!elements) {
        let elements = {
            box: document.querySelector(`#prize-item`),
            bar: document.querySelector(`#prize-bar`),
            text: document.querySelector(`#prize-count`)
        };
        //     prizeElement[type] = elements;
        // }

        // if (!prizeElement.prizeType) {
        //     prizeElement.prizeType = document.querySelector("#prizeType");
        //     prizeElement.prizeLeft = document.querySelector("#prizeLeft");
        //     prizeElement.prizeText = document.querySelector("#prizeText");
        // }

        // if (isInit) {
        //     for (let i = prizes.length - 1; i > currentPrizeIndex; i--) {
        //         let type = prizes[i]["type"];
        //         document.querySelector(`#prize-item-${type}`).className =
        //             "prize-item done";
        //         document.querySelector(`#prize-bar-${type}`).style.width = "0";
        //         document.querySelector(`#prize-count-${type}`).textContent =
        //             "0" + "/" + prizes[i]["count"];
        //     }
        // }

        // if (lasetPrizeIndex !== currentPrizeIndex) {
        //     let lastPrize = prizes[lasetPrizeIndex],
        //         lastBox = document.querySelector(`#prize-item-${lastPrize.type}`);
        //     lastBox.classList.remove("shine");
        //     lastBox.classList.add("done");
        //     elements.box && elements.box.classList.add("shine");
        //     prizeElement.prizeType.textContent = currentPrize.text;
        //     prizeElement.prizeText.textContent = currentPrize.title;

        //     lasetPrizeIndex = currentPrizeIndex;
        // }

        // if (currentPrizeIndex === 0) {
        //     prizeElement.prizeType.textContent = mockData.prizes[0].title;
        //     prizeElement.prizeText.textContent = mockData.prizes[0].text;
        //     prizeElement.prizeLeft.textContent = 999
        //     return;
        // }

        // count = totalCount - count;
        // count = count < 0 ? 0 : count;
        // let percent = (count / totalCount).toFixed(2);
        // elements.bar && (elements.bar.style.width = percent * 100 + "%");
        // elements.text && (elements.text.textContent = count + "/" + totalCount);
        // prizeElement.prizeLeft.textContent = count;
        elements.bar && (elements.bar.style.width = 0 * 100 + "%");
        elements.text && (elements.text.textContent = 0 + "/" + totalCount);
        // prizeElement.prizeLeft.textContent = 0;
    };
})();

export {
    setPrizeData,
    setPrizes,
    addQipao
};
